<template>
    <myMoveBox ref="myMoveBoxDom" :attr="curAttr" @show="box_ShowEvent">
        <template #show>
            <img class="icon-move" style="width:30px;height:30px" src="@/static/icon/message.svg" />
        </template>
        <template #hide>
            <div class="message-box" ref="messageBoxDom">
                <div class="nickname">
                    <input v-model="nickName" placeholder="NickName" />
                </div>
                <div class="text">
                    <textarea v-model="text" placeholder="由此开始"></textarea>
                </div>
                <div class="bottom">
                    <span @click="submit_ClickEvent">Submit</span>
                </div>
                <div class="clear" @click.stop="reset_ClickEvent"></div>
            </div>
        </template>
    </myMoveBox>
</template>

<script setup>
import { onMounted } from 'vue';
import { loadMessage_API } from '@/axios/api/other.js'
import { useUserStores } from '@/stores/index.js'
import myMoveBox from '@/components/moveBox-v2/index-extra.vue'

const userStores = useUserStores();

const curAttr = {
    posiIndex: [1, 0],//起始下标
    whCount: [1, 1],//宽高长度
    zIndex: [999, 9999],//图层
    backcolor: ['#409eff', 'white'],//背景颜色
    isClick: true,//默认点击
};

const nickName = ref('');
const text = ref();
const myMoveBoxDom = ref();
const messageBoxDom = ref();
const emits = defineEmits(['change']);

onMounted(() => {
    nickName.value = userStores.config.nickName;
})

const box_ShowEvent = () => {
    myMoveBoxDom.value.moveTo({
        wh: [500, 300],
        duration: 0.3,
    });
}

//发布
const submit_ClickEvent = () => {
    if (!nickName.value) {
        messageBox.show({
            color: 'y',
            text: 'NickName 为空!'
        });
        return;
    }
    if (!text.value) {
        messageBox.show({
            color: 'y',
            text: '不想写就不写 哼!'
        });
        reset_ClickEvent();
        return;
    }
    const arr = text.value.split('\n');
    let curTest = '';
    let curName = nickName.value;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i])
            curTest += (arr[i] + '<br/>')
    }

    loadMessage_API({
        name: curName,
        text: curTest,
    }).then(res => {
        console.log(res)
        if (res.statusCode == 0) {
            //成功
            const id = res.result;
            //记录楼层, 并且吧NickName Save localhost
            userStores.config.messageList.push(id);

            messageBox.show({
                color: 'g',
                text: '成功 !',
            })

            emits('change', {
                id: id, text: curTest, name: nickName.value
            });
            reset_ClickEvent();
        }
    }).finally(() => {
        userStores.config.nickName = curName;
    });
}

const reset_ClickEvent = () => {
    text.value = '';
    myMoveBoxDom.value.hide();
}

</script>

<style scoped lang="scss">
.writing {
    position: absolute;
    width: 100%;
    height: 100%;
}

.message-box {
    width: 100%;
    height: 100%;
    background: white;
    position: relative;

    .clear {
        position: absolute;
        top: 5px;
        right: 5px;
        background-image: url('@/static/icon/close-bl.svg');
        width: 15px;
        height: 15px;
        background-size: cover;
        background-position: center;
    }

    .nickname {
        padding: 10px 30px;

        >input {
            outline: none;
            padding: 2px 10px;
            border: 0px;
            border-bottom: 2px solid #409eff;
            font-size: 15px;
            color: #409eff;
        }
    }

    .text {
        >textarea {
            height: 210px;
            width: calc(100% - 60px);
            margin-left: 29px;
            outline: 0px;
            border: 0px solid #409eff;
            border-radius: 3px;
            font-size: 17px;
            text-decoration: underline #409eff;
            line-height: 20px;
            color: #409eff;
            // text-indent: 20px;
            resize: none;
            // background: red;
        }
    }

    .bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        >span:last-child {
            border: 2px solid #409eff;
            color: #409eff;
            padding: 3px 10px;
            border-radius: 7px;
            cursor: pointer;
            margin-right: 7px;
        }
    }
}
</style>